<template>
  <form @submit.prevent="onFormSearch">
    <input class="form-input" type="text" :placeholder="placeholder" v-model="searchText">
    <button class="form-button" type="submit">搜 索</button>
  </form>
</template>
<script>
import { apiSerachGoods } from 'js/api'
export default {
  props: {
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchText: '',
      param: {
        currentPage: parseInt(this.$route.query.page) || 1,
        showCount: 20,
        // 搜索类型 goods：商品 store：店铺 goodsBrand：品牌
        searchType: 'goods',
        // 商品的搜索关键字
        keyWord: '' || this.$route.query.key,
        // 品牌名称
        brandName: '' || this.$route.query.name,
        // 商品最低价
        goodsCurrentPriceFloor: '' || this.$route.query.pricedown,
        // 商品最高价
        goodsCurrentPriceCeiling: '' || this.$route.query.priceup,
        // 商家id
        storeId: '',
        // 商家所在地
        storeArea: '',
        // 主营行业
        mainIndustry: '',
        // 最低年销售额
        yearSalesFloor: '',
        // 最高年销售额
        yearSalesCeiling: '',
        // 一级分类ID
        gcIdFirst: '' || this.$route.query.gf,
        // 二级分类ID
        gcIdSecond: '' || this.$route.query.gs,
        // 三级分类ID
        gcIdThird: '' || this.$route.query.gt,
        // 根据类目条件搜索
        goodsPro: '' || this.$route.query.p,
        // 综合（条件字段）
        // colligate: '',
        // 按那个字段排序
        orderBy: this.$route.query.ob || '',
        // 排序顺序
        orderType: this.$route.query.ot || 'desc'
      },
      classify: [],
      totalPage: 0,
      totalCount: 0,
      allSearchResult: ''
    }
  },
  methods: {
    onFormSearch() {
      // 获取搜索的列表数据
      // 清空商品搜索结果
      this.allSearchResult = []

      // 清空商品分类
      this.classify = []

      // 请求接口
      apiSerachGoods(this.param).then((data) => {
        // 搜索结果
        this.allSearchResult = data.luceneList

        // 当前页
        this.param.currentPage = data.currentPage

        // 总页码
        this.totalPage = data.totalPage

        // 总数量
        this.totalCount = data.totalCount

        // 商品分类
        this.classify = data.goodsPropertyList
      })

      // 跳转页面
      this.$router.push(`/search/goods?type=goods&key=${decodeURIComponent(encodeURIComponent(this.searchText))}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.form-input {
    border: 0;
    box-shadow: 1px 1px 4px #ddd inset;
    padding-left: 5px;
    height: 27px;
    box-sizing: border-box;
    width: 241px;
    outline: 0;
    float: left
  }
  .form-button {
    border: 0;
    border-left: 1px solid #F00384;
    width: 70px;
    height: 27px;
    background-color: #F6F6F6;
    color: #F00384;
    outline: 0;
    vertical-align: middle;
    text-align: center;
    cursor: pointer
  }
</style>